|
Web Page Design Notes
- World Wide Web using the internet
allows web pages to be viewed by Web browser which translates Hypertext
Markup Language (HTML) into a graphical Web page and allows the navigation
from one Web page to another. Browsers display information differently which
requires Web page testing.
- Use search engine – located using
key terms - so important to have key terms within short description and
makes introduction text most important for locating sites using a search
engine.
- Web index – contains only
registered sites
- Five major types of Web sites
- Commercial Sites – Sell or promote
a company’s products or services
- E-commerce site: buying or
selling goods and services on-line (e-bay, stores)
- Corporate Presence sites:
provide information and promote positive image of the company
(pharmaceutical (drug) company)
- Portal Sites – Provides a variety
of services that people use every day (excite.com, google, yahoo)
- Informational Sites – Provides
people with useful information
- News sites: provides local,
national, and international news
- Government sites: provides
information about government activities and regulations
- Public Interest sites: focus on
situation and how individuals might respond (make-a-wish foundation
web site)
- Personal Sites – used by
individuals to share information
- Educational Sites – provides
information (school or college, distance learning, museum site)
- Common Web Elements
- Text
- Graphics
- Hyperlinks
- Multimedia
- Web Site Development Process
- Determine the purpose and goals of
the Web site
- What is the site’s purpose?
(sell, educate, inform)
- What are the site’s goals?
(impact on visitors, any change over time)
- What tools do you need to reach
your goals?
- What is your primary (target)
audience?
- What kinds of hardware and
software are the site’s visitors likely to be using?
- Design and develop the Web site
- Information design – determine
the content that will appear on each page based on audience,
purpose, message, and scope (amount of desired information)
- What text will I include on
each page?
- What graphics will I
include on each page?
- How will my text and
graphics support the site’s purpose?
- Presentation design – determine
the physical appearance of the site’s pages - plan using rough
sketches, thumbnail sketch, and brainstorm ideas - chose theme to
gain attention, message, and provide a common look
- What look and feel will the
site have?
- What color scheme will I
use?
- How will I position my
hyperlinks?
- Interaction design – determine
how the user will navigate through the site - page
organization provides clues through consistency and repetition -
Good navigation will tell the viewer where he/she is and where
he/she can go within the Web site.
- Where will the user need to
go?
- In what order will the user
move through the site?
- Is each link’s purpose
clear to the user?
- Evaluate and test the Web site
- Confirm the completed site
meets your intended purpose and goals
- Test your site to make sure
that everything works and displays correctly
- Implement the Web site – publish on
a server
- Maintain the Web site – keep it
current and working properly
- Page Layout Guidelines
- Eliminate clutter
- Remove unnecessary content
- Update information
- Choose function over form - keep only elements that
you need and discard elements that just add visual interest
- Avoid overkill - avoid using too many different
elements as links, colors, or scrolling text
- Use white space
- Emphasize content – size element
proportional to importance
- Group related items
- Align text consistently
- Balance content (top and bottom,
right and left side of page)
- Keep download time short
- Use safe area (800 x 600 pixels)
most important and eye-catching information in this area because it is
the space that viewers will see first
- Navigation Schemes – plan that
determines how Web pages will relate to each other
- Hierarchical navigation scheme –
pages are arranged in levels
o
Linear navigation scheme –
An information structure wherein parts are
connected to each other in a straight line. Especially useful for content such
as stories or step-by-step instruction.
o
Random-access
navigation scheme – pages are not organized in any particular order but linked
to each other
o
Combination scheme: A mixture of two or more
different information structures. A mixed structure is best where the
information in the site does not fit neatly into one structure or the other, but
requires that they be mixed
- Follow Copyright and Fair Use Laws
|